<script setup lang="ts">
import 'echarts-liquidfill';
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import { useDataScreenListStore } from '@/store/modules/dcp/enginee_certification/dataScreenList';
// 获取父组件数据
const mName: Ref<string> = inject('mName') as Ref<string>;
const companys: Ref<string> = inject('companys') as Ref<string>;

const people = ref('已认证人数占总人数比');
// const level = ref<any>({});
// 获取节点
const charts = ref();
const chartsTwo = ref();
const chartsThree = ref();
const useDataScreenList = useDataScreenListStore();
const statisticsData = ref<any>({});
const allTotal = ref<number>(0);
const total = ref<number>(0);
async function drawData() {
  await useDataScreenList.getTotalData();
  allTotal.value = useDataScreenList.getSxData().total;
  let commonProportion: number = 0;
  let professionProportion: number = 0;
  let experienceProportion: number = 0;
  if (mName.value === '绍兴市' || mName.value === undefined || mName.value === null) {
    statisticsData.value = useDataScreenList.getSxData();
  }
  else {
    const alldata = useDataScreenList.getCompanyTotalData();
    const data = alldata.find(item => item.address === mName.value)?.company || [];
    statisticsData.value = data[0];
  }
  total.value = statisticsData.value.total;
  // console.log(statisticsData.value);

  // console.log(total.value);

  if (statisticsData.value.common === 0) {
    commonProportion = 0;
  }
  else {
    commonProportion = Number((100 * statisticsData.value.common / statisticsData.value.total).toFixed(2));
  }
  if (statisticsData.value.profession === 0) {
    professionProportion = 0;
  }
  else {
    professionProportion = Number((100 * statisticsData.value.profession / statisticsData.value.total).toFixed(2));
  }
  if (statisticsData.value.experience === 0) {
    experienceProportion = 0;
  }
  else {
    experienceProportion = Number((100 * statisticsData.value.experience / statisticsData.value.total).toFixed(2));
  }

  // 获取echarts类的实例
  const mycharts = echarts.init(charts.value);
  const mychartsTwo = echarts.init(chartsTwo.value);
  const mychartsThree = echarts.init(chartsThree.value);
  // 设置实例的配置项
  mycharts.setOption({
    title: {
      text: `研发通用(${statisticsData.value.common}人)`,
      left: 'center',
      top: '100',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: 'rgb(17, 20, 78)',
      },
      subtext: `${commonProportion}%`, // 副标题
      subtextStyle: {
        fontWeight: 'bold',
        fontSize: 35,
        color: 'rgb(17, 20, 78)',
      },
    },

    series: [
      {
        type: 'liquidFill', // 图表类型
        radius: '80%',
        center: ['50%', '50%'],
        data: [
          commonProportion / 100,
          commonProportion / 100,
          commonProportion / 100,
        ], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: '#F4F9FF',
        },
        label: {
          normal: {
            show: false,
            formatter: `${(0.5 * 100).toFixed(0)}%`,
            textStyle: {
              fontSize: 38,
              color: 'black',
            },
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(255,255,255,1)',
              },
              {
                offset: 0,
                color: 'rgba(103,205,251,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(187,248,252,0.5)',
              },
              {
                offset: 0,
                color: 'rgba(30,134,245,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(173, 250, 255,0.66)',
              },
              {
                offset: 0,
                color: 'rgba(20, 235, 239,0.66)',
              },
            ],
            globalCoord: false,
          },
        ],
        outline: {
          show: false,
        },
      },
      // 外层线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['92%', '93%'], // 外层线粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: 100,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: '#67CDFB',
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                // color: "#5886f0"
              },
            },
          },
        ],
      },
      // 进度线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['90%', '95%'], // 进度线粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: commonProportion, // 进度
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 2,
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#33E2ED' },
                  { offset: 1, color: '#807AFE' },
                ],
              },
            },
            emphasis: {
              labelLine: {
                show: false,
              },
            },
          },
          {
            // 画剩余的刻度圆环
            name: '',
            value: 100 - commonProportion,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: '#050038',
              },
            },
          },
        ],
      },
    ],

  });
  mychartsTwo.setOption({
    title: {
      text: `研发专业(${statisticsData.value.profession}人)`,
      left: 'center',
      top: '100',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: 'rgb(17, 20, 78)',
      },
      subtext: `${professionProportion}%`, // 副标题
      subtextStyle: {
        fontWeight: 'bold',
        fontSize: 35,
        color: 'rgb(17, 20, 78)',
      },
    },

    series: [
      {
        type: 'liquidFill', // 图表类型
        radius: '80%',
        center: ['50%', '50%'],
        data: [
          professionProportion / 100,
          professionProportion / 100,
          professionProportion / 100,
        ],
        backgroundStyle: {
          borderWidth: 1,
          color: '#F4F9FF',
        },
        label: {
          normal: {
            show: false,
            formatter: `${(0.5 * 100).toFixed(0)}%`,
            textStyle: {
              fontSize: 38,
              color: 'black',
            },
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(255,255,255,1)',
              },
              {
                offset: 0,
                color: 'rgba(103,205,251,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(187,248,252,0.5)',
              },
              {
                offset: 0,
                color: 'rgba(30,134,245,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(173, 250, 255,0.66)',
              },
              {
                offset: 0,
                color: 'rgba(20, 235, 239,0.66)',
              },
            ],
            globalCoord: false,
          },
        ],
        outline: {
          show: false,
        },
      },
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['92%', '93%'],
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: 100,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: '#67CDFB',
            },
            emphasis: {
              labelLine: {
                show: false,
              },
            },
          },
        ],
      },
      // 进度线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['90%', '95%'], // 进度线粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: professionProportion, // 进度
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 2,
                colorStops: [
                  { offset: 0, color: '#33E2ED' },
                  { offset: 1, color: '#807AFE' },
                ],
              },
            },
            emphasis: {
              labelLine: {
                show: false,
              },
            },
          },
          {
            // 画剩余的刻度圆环
            name: '',
            value: 100 - professionProportion,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: '#050038',
              },
            },
          },
        ],
      },
    ],

  });
  mychartsThree.setOption({
    title: {
      text: `研发经验(${statisticsData.value.experience}人)`,
      left: 'center',
      top: '100',
      textStyle: {
        fontWeight: 'normal',
        fontSize: 20,
        color: 'rgb(17, 20, 78)',
      },
      subtext: `${experienceProportion}%`, // 副标题
      subtextStyle: {
        fontWeight: 'bold',
        fontSize: 35,
        color: 'rgb(17, 20, 78)',
      },
    },

    series: [
      {
        type: 'liquidFill', // 图表类型
        radius: '80%',
        center: ['50%', '50%'],
        data: [
          experienceProportion / 100,
          experienceProportion / 100,
          experienceProportion / 100,
        ],
        backgroundStyle: {
          borderWidth: 1,
          color: '#F4F9FF',
        },
        label: {
          normal: {
            show: false,
            formatter: `${(0.5 * 100).toFixed(0)}%`,
            textStyle: {
              fontSize: 38,
              color: 'black',
            },
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(255,255,255,1)',
              },
              {
                offset: 0,
                color: 'rgba(103,205,251,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(187,248,252,0.5)',
              },
              {
                offset: 0,
                color: 'rgba(30,134,245,1)',
              },
            ],
            globalCoord: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: 'rgba(173, 250, 255,0.66)',
              },
              {
                offset: 0,
                color: 'rgba(20, 235, 239,0.66)',
              },
            ],
            globalCoord: false,
          },
        ],
        outline: {
          show: false,
        },
      },
      // 外层线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['92%', '93%'], // 外层线粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: 100,
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: '#67CDFB',
            },
            emphasis: {
              labelLine: {
                show: false,
              },
            },
          },
        ],
      },
      // 进度线
      {
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['90%', '95%'], // 进度线粗细
        hoverAnimation: false,
        data: [
          {
            name: '',
            value: experienceProportion, // 进度
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 2,
                colorStops: [
                  // !! 在此添加渐变过程色 !!
                  { offset: 0, color: '#33E2ED' },
                  { offset: 1, color: '#807AFE' },
                ],
              },
            },
            emphasis: {
              labelLine: {
                show: false,
              },
            },
          },
          {
            // 画剩余的刻度圆环
            name: '',
            value: 100 - experienceProportion,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: '#050038',
              },
            },
          },
        ],
      },
    ],

  });
}
watch(mName, () => {
  drawData();
}, { immediate: true });

onMounted(async () => {
  await drawData();
});
</script>

<template>
  <div class="box">
    <div class="top">
      <div class="left">
        <p class="title">
          区域认证情况
        </p>
        <p class="bg" />
      </div>
      <div class="right">
        <div style="margin-left: 40px;">
          已认证总人数<span>{{ allTotal }}</span>人
        </div>
        <div><span style="font-size: 30px;">{{ mName || '绍兴市' }}</span>:总认证人数<span>{{ total }}</span>人</div>
      </div>
    </div>
    <div class="number">
      <span v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>
    <div class="chart">
      <div ref="charts" class="charts1" />
      <div ref="chartsTwo" class="charts2" />
      <div ref="chartsThree" class="charts3" />
    </div>
    <div v-if="companys.length > 0" class="botton">
      所属公司：{{ companys }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  margin-top: 10px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;

  .top {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;

    .left {
      .title {
        font-size: 25px;
        color: white;
      }

      .bg {
        width: 68px;
        height: 7px;
        margin-top: -10px;
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
      }
    }

    .right {
      float: right;
      margin-right: 40px;
      font-size: 25px;
      color: white;

      div {
        margin-top: 15px;

        span {
          margin: 0 5px;
          color: #29fcff;
        }
      }
    }
  }

  .botton {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    padding-bottom: 10px;
    color: white;
  }

  .number {
    display: flex;
    padding: 10px;
    margin-top: 20px;

    span {
      flex: 1;
      height: 40px;
      line-height: 40px;
      color: #29fcff;
      text-align: center;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .chart {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .charts1 {
      width: 100%;
      height: 250px;
    }

    .charts2 {
      width: 100%;
      height: 250px;
    }

    .charts3 {
      width: 100%;
      height: 250px;
    }
  }
}
</style>
